<template>
  <div class="tile is-parent">
    <article class="tile is-child">
      <h2 class="title is-4 text-left">基础配置 <span style="float: right"><span @click="modify" class="button">保存</span><button @click="clear" class="button is-link">还原</button></span></h2>
      <div class="block">
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">网站名称</label>
          </div>
          <div class="control">
            <div class="control is-fullwidth">
              <input class="input" v-model="param.name" type="text">
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">网站logo</label>
          </div>
          <div class="control">
            <upload @upload="getMap" path="web/logo" :imgs.sync="param.image" style="margin-left: -20px" ids="image"></upload>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">网站ico</label>
          </div>
          <div class="control">
            <upload @upload="getMap" path="web/favicon" :imgs.sync="param.favicon" style="margin-left: -20px" ids="favicon"></upload>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">网站域名</label>
          </div>
          <div class="control">
            <div class="control is-fullwidth">
              <input class="input" v-model="param.domain" type="text">
            </div>
          </div>
        </div>

        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">版权信息</label>
          </div>
          <div class="control">
            <div class="control is-fullwidth">
              <input class="input" v-model="param.copyright" type="text">
            </div>
          </div>
        </div>

        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">环境时间</label>
          </div>
          <div class="control">
            <div class="control is-fullwidth">
              <input class="input" v-model="param.expirationTime" type="text">
            </div>
          </div>
        </div>
        <!--<div class="control is-horizontal">-->
          <!--<div class="control-label">-->
            <!--<label class="label">语言</label>-->
          <!--</div>-->
          <!--<div class="control">-->
            <!--<div class="control is-fullwidth">-->
              <!--<input class="input" v-model="param.defaultLangKey" type="text">-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="control is-horizontal">-->
          <!--<div class="control-label">-->
            <!--<label class="label">关键字</label>-->
          <!--</div>-->
          <!--<div class="control">-->
            <!--<div class="control is-fullwidth">-->
              <!--<input class="input" v-model="param.keywords" type="text">-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">相关信息</label>
          </div>
          <div class="control">
            <textarea class="textarea" v-model="param.description" placeholder="Explain how we can help you"></textarea>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">激活</label>
          </div>
          <div class="control">
            <input style="margin-top: 12px" type="checkbox" v-model="param.enabled">
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label"></label>
          </div>
        </div>
      </div>
    </article>
  </div>
</template>

<script>
  import upload from '../components/modifyModel/upload.vue'
  import labelgroup from '../components/labelGroup.vue'
  import Vue from 'vue'
  import Message from 'vue-bulma-message'

  const MessageComponent = Vue.extend(Message)

  const openMessage = (propsData = {
    title: '',
    message: '',
    type: '',
    direction: '',
    duration: 1500,
    container: '.messages'
  }) => {
    return new MessageComponent({
      el: document.createElement('div'),
      propsData
    })
  }
  export default {
    components: { upload, labelgroup },

    data () {
      return {
        param:{
          "name": "",
          "image": "",
          "domain": "",
          "copyright": "",
          "favicon": "",
          "expirationTime": '',
          "defaultLangKey": "",
          "langKeys": [
            "zh",
            "en"
          ],
          "keywords": [],
          "description": "",
          "enabled": false
        }
      }
    },

    computed: {
    },
    methods: {
      getMap (data) {
        this.param[data.ids] = data.url
      },
      modify() {
        let param = Object.assign(this.param,{id:"89060613317206016"})
        this.$http.put('cms/api/websites',param).then(function(res){
          openMessage({
            title: '提示',
            message: '修改成功',
            type: 'primary'
          })
        })
      },
      clear() {
        this.param = {
          "name": "",
          "image": "",
          "domain": "",
          "copyright": "",
          "favicon": "",
          "expirationTime": '',
          "defaultLangKey": "",
          "langKeys": [
            "zh",
            "en"
          ],
          "keywords": [],
          "description": "",
          "enabled": false
        }
      },
      gets () {
        let vm = this
        this.$http.get('cms/api/websites/89060613317206016',{}).then(function(res){
          vm.param = res.data
        })
      }
    },
    mounted () {
      this.gets()
      this.$parent.$parent.$refs.nav.status = false
    }
  }
</script>

<style lang="scss" scoped>
</style>
